$(function(){
	$('body').css({
		'min-width': '850px',
		'min-height': '300px',
		width: '100%',
		height: '100%',
	});
})
function boardstyle(board){
	$(board).css({
		width:'850px',
		height:'300px',
		border:'2px solid red',
		margin:'50px auto',
		'padding-left':'10px',
		'padding-top':'10px',
		'background':'linear-gradient(to bottom,honeydew,red,greenyellow,deepskyblue,blueviolet,darkred)',
	});
}
function keystyle(keydiv){
	$(keydiv).css({
		margin:'2px',
		width:'40px',
		height:'40px',
		border:'1px solid black',
		float:'left',
		'text-align':'center',
		'line-height':'40px',
		color:'red',
		'font-weight':'border',
		'background':'black',
		cursor:'pointer',
	});
}

$(function(){
	var board=$('<div id="keyboard"></div>');
	$('body').append(board);
	boardstyle(board);
	var number2=['~','1','2','3','4','5','6','7','8','9','0','-','+','←','Ins','Home','pgUp'];
	var number3=['Tab','Q','W','E','R','T','Y','U','I','O','P','[',']','\\','Del','End','PgDn'];
	var number4=['Caps','A','S','D','F','G','H','J','K','L',';','"','Enter'];
	var number5=['Shift','Z','X','C','V','B','N','M',',','.','?','Shift','↑'];
	var number6=['Ctrl','☯','Alt','Space','Alt','Fn','✉','Ctrl','←','↓','→'];
	for(var i=1;i<=87;i++){
		if(i<=16){
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			if(i==1){
				$(keydiv).append('ESC');
				$(keydiv).css({
					'margin-right':'48px',
				});
			}else if(i<=13){
				$(keydiv).append('F'+(i-1));
				if(i==5||i==9||i==13){
					$(keydiv).css({
					'margin-right':'20px',
				});
				}
			}else if(i==14){
				$(keydiv).append('PrtSc');
			}else if(i==15){
				$(keydiv).append('ScrLk');
			}else{
				$(keydiv).append('Pause');
			} 
			$(board).append(keydiv);
		}else if(i<=33){
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			$(keydiv).css({
				'margin-top':'20px',
			});
			if(i==30){
				$(keydiv).css({
					'margin-right':'20px',
					width:'76px',
				});
			}
			$(keydiv).append(number2[i-17]);
			$(board).append(keydiv);
		}else if(i<=50){
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			if(i==34){
				$(keydiv).css({
					width:'65px',
				});
			}
			if(i==47){
				$(keydiv).css({
					'margin-right':'20px',
					width:'51px',
				});
			}
			$(keydiv).append(number3[i-34]);
			$(board).append(keydiv);
		}else if(i<=63){
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			if(i==51){
				$(keydiv).css({
					width:'80px',
				});
			}
			if(i==63){
				$(keydiv).css({
					width:'81px',
					'margin-right':'170px',
				})
			}
			$(keydiv).append(number4[i-51]);
			$(board).append(keydiv);
		}else if(i<=76){
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			if(i==64){
				$(keydiv).css({
					width:'100px',
				});
			}
			if(i==75){
				$(keydiv).css({
					width:'107px',
					'margin-right':'65px',
				});
			}
			if(i==76){
				$(keydiv).css({
					'margin-right':'50px',
				});
			}
			$(keydiv).append(number5[i-64]);
			$(board).append(keydiv);
		}else{
			var keydiv=$('<div></div>');
			keystyle(keydiv);
			if(i==80){
				$(keydiv).css({
					width:'349px',
				});
			}
			if(i==84){
				$(keydiv).css({
					'margin-right':'19px',
				});
			}
			$(keydiv).append(number6[i-77]);
			$(board).append(keydiv);
		}
	}
	
	
})

function keyupcolor(keyCode){
	var valueArr=$('div');
	valueArr.each(function(i,v){
		if(v.innerHTML==String.fromCharCode(keyCode)){
			$(valueArr[i]).css({
				'background-color':'black',
			});
		}
	})
}
/*function keypresscolor(keyCode){
	var valueArr=$('div');
	valueArr.each(function(i,v){
		if(v.innerHTML==String.fromCharCode(keyCode)){
			$(valueArr[i]).css({
				'background-color':'red',
			});
		}
	})
}*/
function keydowncolor(keyCode){
	var valueArr=$('div');
	valueArr.each(function(i,v){
		if(v.innerHTML==String.fromCharCode(keyCode)){
			$(valueArr[i]).css({
				'background-color':'yellow',
			});
		}
	})
}
$(function(){
	$('body').keyup(function(e){
		keyupcolor(e.keyCode);
	});
	$('body').keydown(function(e){
		keydowncolor(e.keyCode);
	});
})
